import './HowToWin.css';
import { Image } from 'react-bootstrap';
import Gallary from './Gallary';

function HowToWin() {
  return (
    <div className='howToWin' id="howToWin">
      <Image className='howToWin-star' src="images/howToWin/star.png" />
      <div className='howToWin-title'>How to win</div>
      <div className='howToWin-center-box'>
        <Image className='howToWin-person' src="images/howToWin/person.png" />
        <div className='howToWin-content-txt'>
          <div className='howToWin-content-txt-title'>
            <div>Through the efforts of scientists, the first starship </div>
            <div>was finally made.</div>
          </div>
          <div>
            <Image className='howToWin-icon-left' src="images/howToWin/icon_left.png" />The starship can only carry 100 pioneers
          </div>
          <div>
            <Image className='howToWin-icon-left' src="images/howToWin/icon_left.png" />The organization needs your sponsorship to recruit
          </div>
          <div>100 pioneers from the world</div>
          <div>
            <Image className='howToWin-icon-left' src="images/howToWin/icon_left.png" />Once the starship is fully deployed, a commander
          </div>
          <div>will be selected randomly with the reward of 8.5 </div>
          <div>ETH for his/her courage and leadership</div>
          <div className='howToWin-content-txt-title'>
            <div>Come and join, sponsor a pioneer, and earn a chance </div>
            <div>to be the commander.</div>
          </div>
        </div>
        <div className='howToWin-box'>
          <div className='howToWin-box-title'>Reward Rule</div>
          <div>Each Pioneer (NFT) = 0.1 ETH + Gas Fee</div>
          <div>1/100 Chance to be the commander</div>
          <div>The organization will buy the commander NFT back with 8.5 ETH</div>
        </div>
      </div>
      <Gallary />
    </div>
  );
}

export default HowToWin;
